<template>
	<view class="searchdetails">
		<u-search placeholder="请输入关键字" disabled="true" @click="search"></u-search>
		<ir-tabs :navs="navs" :multiple="true" @navChange="change">
		     <template v-slot:page1>
		        <view class="lie">
		        			<view class="content" v-for="(item,index) in list1" :key="index" @click="godetails(item.id)">
		        				<div class="left">
		        					<img :src="item.cover" alt="" srcset="" v-if="item.cover==''?false:true">
		        					<img v-else src="/static/logo.png" alt="">
		        				</div>
		        				<div class="right">	
		        					<div class="right-top">{{item.title}}</div>
		        					<div class="bottom">
		        						<span>{{item.price}}</span>
		        						<span>{{item.t_price}}</span>
		        					</div>
		        				</div>
		        	</view>
		        </view>
		     </template>
		        
		     <template v-slot:page2>
		       <view class="lie">
		       			<view class="content" v-for="(item,index) in list1" :key="index" @click="godetails(item.id)">
		       				<div class="left">
		       					<img :src="item.cover" alt="" srcset="" v-if="item.cover==''?false:true">
		       					<img v-else src="/static/logo.png" alt="">
		       				</div>
		       				<div class="right">	
		       					<div class="right-top">{{item.title}}</div>
		       					<div class="bottom">
		       						<span>{{item.price}}</span>
		       						<span>{{item.t_price}}</span>
		       					</div>
		       				</div>
		       	</view>
		       </view>
		    </template>
		</ir-tabs>
	</view>
</template>

<script>
	import {getsearch} from '../request/index.js'
	export default {
		data() {
			return {
				navs:['课程','专栏'],
				list1:[],
				list2:[],
				keyword:''
			}
		},
		methods: {
			search(){
				uni.navigateTo({
					url:'/pages/search/search'
				})
			},
			change(e){
				console.log(e);
				if(e==0){
					this.getlist("course")
				}else if(e==1){
					this.getlist("column")
				}
			},
			getlist(type){
				getsearch({keyword:this.keyword,page:this.page,type:type}).then(res=>{
					this.list1=res.data.data.rows
					this.list2=res.data.data.rows
					console.log(res);
				})
			}
		},
		onLoad(options) {
			this.keyword=options.keyword
			// console.log(options);
			this.getlist("course")
		}
	}
</script>

<style lang="scss">
.searchdetails{
	width: 100%;
	height: 100%;
	.lie{
		width: 100%;
		.top{
			width: 100%;
			height: 50px;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			line-height: 50px;
			padding:  10px;
			.left{
				font-weight: 800;
			}
			.right{
				font-size: 16px;
			}
		}
		.content{
			width: 100%;
			height: 115px;
			padding: 10px;
			box-sizing: border-box;
			display: flex;
			.left{
				flex: 4;
				img{
					width: 100%;
					height: 100%;
				}
			}
			.right{
				flex: 6;
			}
			
		}
	}
}
</style>
